<script setup lang="ts">
import {sessionListApi, type sessionType} from "@/api/session_list_api";
import type {columnType} from "@/components/admin/f_list.vue";
import F_list from "@/components/admin/f_list.vue";
import F_avatar_title from "@/components/common/f_avatar_title.vue";
import {dateCurrentFormat} from "@/utils/date";
import {reactive, ref} from "vue";
import F_chat_drawer from "@/components/common/f_chat_drawer.vue";

const columns: columnType[] = [
  {title: "ID", dataIndex: 'id'},
  {title: "会话名称", dataIndex: 'title'},
  {title: "角色", slotName: 'role'},
  {title: "对话数", dataIndex: 'chatCount'},
  {title: "创建时间", dataIndex: 'createdAt', type: "date"},
  {title: "最后一次聊天时间", dataIndex: 'chatLastDate', type: "date", dateFormat: "current"},
  {title: "聊天内容", slotName: 'chatLastContent'},
  {title: "操作", slotName: 'action'},
]
const visible = ref(false)
const sessionDetail = reactive({
  id: 0,
  title: ""
})

function edit(record: sessionType) {
  sessionDetail.title = record.title
  sessionDetail.id = 0
  setTimeout(()=>{
    sessionDetail.title = record.title
    sessionDetail.id = record.id
    visible.value = true
  })
}


</script>

<template>
  <div>
    <f_chat_drawer v-model:visible="visible" :detail="sessionDetail"></f_chat_drawer>
    <f_list
        ref="fListRef"
        :url="sessionListApi"
        no-add
        @edit="edit"
        edit-label="查看对话"
        :params="{type: 1}"
        :columns="columns">
      <template #role="{record}: {record: sessionType}">
        <f_avatar_title :title="record.aiRoleTitle" :avatar="record.aiRoleAvatar"></f_avatar_title>
      </template>

      <template #chatLastContent="{record}: {record: sessionType}">
        <a-typography-text style="max-width: 200px" :ellipsis="{css: true}">{{ record.chatLastContent }}
        </a-typography-text>
      </template>
    </f_list>
  </div>
</template>

<style lang="less">

</style>